import React, { useEffect } from 'react';
import Alert from '@mui/material/Alert';
import { useDispatch, useSelector } from 'react-redux';
import './toast.less';
export default function Toast() {
  const { isShow, message, type } = useSelector(
    (state: IRootState) => state.ToastData
  );
  const dispatch = useDispatch();
  useEffect(() => {
    // 只有显示状态，才需要过一会把它隐藏
    if (!isShow) return;
    setTimeout(() => {
      dispatch({ type: 'Toast_hide' });
    }, 2000);
  }, [dispatch, isShow]);
  return (
    <div className="toast" style={{ display: isShow ? 'block' : 'none' }}>
      <Alert severity={type}>{message}</Alert>
    </div>
  );
}
